<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form size="small">
        <el-form-item label="查询日期">
          <el-date-picker v-model="searchForm.time" type="date" placeholder="请选择日期" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="searchForm.pay_id" @change="handleChagePay">
            <el-option v-for="item in option" :key="item.id" :value="item.id" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账单类型">
          <el-select v-model="searchForm.type_id">
            <el-option v-for="item in type" :key="item.id" :value="item.id" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" size="small" @click="handleClickDownload">下载账单</el-button>
        <a ref="download" v-if="download">点击右键另存为下载</a>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { paDownload } from '@/api/commission'

export default {
  name: 'paDownload',
  components: {
    Breadcrumb
  },
  data() {
    return {
      searchForm: {
        time: '',
        pay_id: '',
        type_id: ''
      },
      option: [
        { id: 2, label: '微信' },
        { id: 1, label: '支付宝' },
        { id: 5, label: '银行' },
        { id: 3, label: '京东' },
        { id: 7, label: '银联' },
        { id: 4, label: '翼支付' },
        { id: 6, label: 'QQ钱包' }
      ],
      type: [],
      download: false
    }
  },
  methods: {
    handleChagePay(v) {
      this.searchForm.type_id = ''
      if (v === 5) {
        const arr = [
          { id: 2, label: '回盘文件' }
        ]
        this.type = arr
      } else {
        const arr = [
          { id: 0, label: '退款账单' },
          { id: 1, label: '支付账单' }
        ]
        this.type = arr
      }
    },
    handleClickDownload() {
      paDownload(this.searchForm).then(Response => {
        if (Response.data.errorCode === 0) {
          this.download = true
          this.$nextTick(() => {
            const bower = !!(navigator.vendor && navigator.vendor.match(/Apple/))
            this.$refs['download'].href = Response.data.result
            if (bower) {
              this.download = false
              this.$alert('<a style="color:#007eff" href="' + Response.data.result + '">点击这里右键另存为下载</a></br><span style="color:#C03639;font-size:12px;">*下载方式：点击右键-选择“下载链接为”</span>', '平安对账单下载', {
                dangerouslyUseHTMLString: true,
                showConfirmButton: false
              })
            } else {
              this.$refs['download'].style.display = 'none'
              this.$refs['download'].click()
              this.download = false
            }
          })
        } else {
          this.$message.error(Response.data.errorMsg)
        }
      })
    }
  }
}
</script>